import { DeleteOutlined, SettingOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { t } from 'i18next';

import { SvgIcon } from '@/components/icon';
import { VariableItemType } from '@/types/app/type';
import { UserInputFormItemType } from '@/types/workflow/template/system/interactive/type';
import { getIcon } from '@/types/workflow/utils';

const VariableItem = ({
  variable,
  handleDeleteVariable,
  handleEditVariable,
}: {
  variable: VariableItemType | UserInputFormItemType;
  handleDeleteVariable?: (variable: VariableItemType | UserInputFormItemType) => void;
  handleEditVariable?: (variable: VariableItemType | UserInputFormItemType) => void;
}) => {
  const { label, description, valueType, required } = variable;

  return (
    <div className="group flex items-center justify-between gap-2 rounded-lg bg-gradient-to-r from-indigo-50 p-2 transition-colors duration-200">
      <div className="flex items-center gap-3">
        <div className="from-red-400 flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-r to-pink-500">
          {/* <AlertCircle className="h-4 w-4 text-white" /> */}
          <SvgIcon icon={getIcon(valueType)} className="text-white" size={22} />
        </div>
        <div className="flex flex-col">
          <span className="text-sm font-medium text-gray-800">{t(label as any)}</span>
          <span className="text-xs text-gray-600">{t(description as any)}</span>
        </div>
      </div>

      <div className="flex items-center gap-2">
        <div
          className={`rounded-lg border-0 p-2 text-xs font-medium ${
            required ? 'bg-functional-red-hover  text-white' : 'bg-text-1 text-text-3'
          }`}
        >
          {required ? '必填' : '非必填'}
        </div>
        {handleEditVariable && (
          <Button
            type="text"
            icon={<SettingOutlined />}
            onClick={() => handleEditVariable && handleEditVariable(variable)}
          />
        )}

        {handleDeleteVariable && (
          <Button
            type="link"
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDeleteVariable && handleDeleteVariable(variable)}
            onMouseEnter={(e) => {
              e.currentTarget.closest('.group')?.classList.add('bg-error/30');
            }}
            onMouseLeave={(e) => {
              e.currentTarget.closest('.group')?.classList.remove('bg-error/30');
            }}
          />
        )}
      </div>
    </div>
  );
};

export default VariableItem;
